<template>
	<view class="coupon-auth">
		<view class="coupon-auth-tips">
			<text>可授权分销商和业务员拥有在商城上派发该优惠券给客户的权利。</text>
			<text>派发优惠券：商城-我的-派发优惠券</text>
		</view>
		<view class="coupon-auth-list" v-if="list.length">
			<view class="coupon-auth-item" v-for="(data,index) in list" :key="index" @click="checkeAuthItem(index)" >
				<view class="coupon-auth-item-checked" :class="{active: data.checked}" v-if="is_manage">
					<view class="checkbox"><icon type="success_no_circle" size="10" color="#FFF" v-if="data.checked"/></view>
				</view>
				<view class="coupon-auth-item-image"><image :src="data.user.heard_img"></image></view>
				<view class="coupon-auth-item-info">
					<view class="name">{{data.user.nickname}}</view>
					<view class="type" v-if="data.type==1">管理员</view>
					<view class="type" v-if="data.type==2">业务员</view>
					<view class="type" v-if="data.type==3">财务</view>
					<view class="type" v-if="data.type==4">分销商</view>
					<view class="type" v-if="data.type==5">代理商</view>
					<view class="type" v-if="data.type==6">设计师</view>
				</view>
				<view class="coupon-auth-item-right">
					<view class="percentage">{{data.royalty}}%</view>
					<view class="Commission">提成</view>
				</view>
			</view>
		</view>
		<nothing text="暂无授权人员" :btn="false" v-else></nothing>
		<view class="coupon-btn">
			<block v-if="!is_manage">
				<view class="manage" @click="is_manage=!is_manage" v-if="list.length">管理</view>
				<view class="add" @click="addAuth"><text>+</text>添加授权</view>
			</block>
			<block v-else>
				<view class="coupon-btn-manage">
					<view class="coupon-btn-manage-checked" :class="{active: is_all_checked}" @click="checkeAll">
						<view class="checkbox"><icon type="success_no_circle" size="10" color="#FFF"/></view>
						全选
					</view>
					<view class="manage-btn">
						<view class="coupon-btn-complate" @click="is_manage=!is_manage">完成</view>
						<view class="coupon-btn-del" @click="del">删除</view>
					</view>
				</view>
			</block>
		</view>
		
		<uni-popup type="bottom" ref="staff" class="staff-list-pop">
			<scroll-view class="staff-list" scroll-y @scrolltolower="onreachbottom">
				<view class="staff-list-box" v-if="staffList.length">
					<view class="coupon-auth-item" v-for="(data,index) in staffList" :key="index" @click="addAuthItem(index)">
						<view class="coupon-auth-item-checked" :class="{active: data.checked}">
							<view class="checkbox"><icon type="success_no_circle" size="10" color="#FFF" v-if="data.checked"/></view>
						</view>
						<view class="coupon-auth-item-image"><image :src="data.user.heard_img"></image></view>
						<view class="coupon-auth-item-info">
							<view class="name">{{data.user.nickname}}</view>
							<view class="type" v-if="data.type==1">管理员</view>
							<view class="type" v-if="data.type==2">业务员</view>
							<view class="type" v-if="data.type==3">财务</view>
							<view class="type" v-if="data.type==4">分销商</view>
							<view class="type" v-if="data.type==5">代理商</view>
							<view class="type" v-if="data.type==6">设计师</view>
						</view>
						<view class="coupon-auth-item-right">
							<view class="percentage">{{data.distributor_royalty}}%</view>
							<view class="Commission">提成</view>
						</view>
					</view>
				</view>
				<view class="noStaff" v-else>您尚未拥有业务员、财务、设计师、分销商或代理商</view>
			</scroll-view>
			<view class="btn"><view class="btn-box" @click="$throttle(submit,2000)">确定添加</view></view>
		</uni-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				coupon_id: '',
				list: [],
				staffList: [],
				page: 0,
				staffPage: 0,
				loading: false,
				staffLoading: false,
				noMore: false,
				is_manage: false,
				is_all_checked: false
			};
		},
		onLoad(options) {
			this.coupon_id = options.coupon_id
			this.init()
		},
		methods: {
			onreachbottom() {
				if(!this.noMore){
					this.page++
					this.loading = true
					this.init()
				}
			},
			init(){
				let data = {
					page: this.page,
					store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id,
					coupon_id: this.coupon_id
				}
				this.$api.CouponAccreditList(data).then(res => {
					this.loading = false
					if(res.datas.length){
						res.datas.forEach(item => {
							this.$set(item,'checked',false)
							this.list.push(item)
						})
					}else{
						this.noMore = true
					}
				})
			},
			getStaffList(){
				let data = {
					limit: 10,
					page: this.staffPage,
					store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id,
				}
				this.$api.StaffLists(data).then(res => {
					this.staffLoading = false
					if(res.datas.length){
						res.datas.forEach(item => {
							this.staffList.push(item)
						})
					}else{
						this.noMore = true
					}
					this.staffList.forEach(item => {
						this.$set(item,'checked',false)
					})
				})
			},
			checkeAll(){
				this.is_all_checked = !this.is_all_checked
				this.list.forEach(item => {
					if(this.is_all_checked){
						item.checked = true
					}else{
						item.checked = false
					}
				})
			},
			checkeAuthItem(index){
				if(!this.is_manage) return
				this.list[index].checked = !this.list[index].checked
				let ids = []
				this.list.forEach(item => {
					if(item.checked){
						ids.push(item)
					}
				})
				if(ids.length==this.list.length){
					this.is_all_checked = true
				}else{
					this.is_all_checked = false
				}
			},
			del(){
				let ids = []
				this.list.forEach(item => {
					if(item.checked){
						ids.push(item.coupon_user_id)
					}
				})
				if(!ids.length){
					return uni.showToast({
						icon: 'none',
						title: '请选择要删除的授权人员'
					})
				}
				uni.showModal({
					title: '温馨提示',
					content: '是否确认移除授权？',
					success: (confirm) => {
						if(confirm.confirm){
							this.$api.DelCoupon({coupon_user_id: ids.join(',')}).then(res => {
								uni.showToast({
									icon: 'none',
									title: '删除成功',
									success: () => {
										this.list = []
										this.init()
									}
								})
							})
						}
					}
				})
			},
			addAuth(){
				this.staffList = []
				this.$refs.staff.open()
				this.getStaffList()
				this.AddFoot('商家-优惠券-授权-添加')
			},
			AddFoot(where){
				this.$api.AddFoot({
					// #ifdef MP
					type: 1,
					// #endif
					//#ifdef APP-PLUS
					type: 2,
					// #endif
					//#ifdef H5
					type: 3,
					// #endif
					store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id,
					client: 2,
					where: where,
					stay_time: 0,
					goods_id: 0,
					store_goods_id: 0
				})
			},
			addAuthItem(index){
				this.staffList[index].checked = !this.staffList[index].checked
			},
			submit(){
				let ids = []
				this.staffList.forEach(item => {
					if(item.checked){
						ids.push(item.user.user_id)
					}
				})
				if(!ids.length){
					return uni.showToast({
						icon: 'none',
						title: '请选择授权人员'
					})
				}
				this.$api.AddCoupon({coupon_id: this.coupon_id,user_id: ids.join(','),store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id}).then(res => {
					uni.showToast({
						icon: 'none',
						title: '添加成功',
						success: () => {
							this.AddFoot('商家-优惠券-授权-添加-完成')
							this.list = []
							this.init()
							this.$refs.staff.close()
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.coupon-auth{
		padding: 30rpx;
		.coupon-auth-tips{
			font-size: 22rpx;
			color: #999;
			line-height: 40rpx;
			text{
				display: block;
			}
		}
		.staff-list{
			max-height: 1000rpx;
			background-color: #FFF;
			.noStaff{
				padding: 30rpx;
				text-align: center;
				color: #999;
				font-size: 28rpx;
			}
			.staff-list-box{
				padding: 0 30rpx;
			}
			.coupon-auth-item{
				display: flex;
				align-items: center;
				background-color: #FFF;
				padding: 30rpx 0;
				border-radius: 8rpx;
				margin-top: 20rpx;
				border-bottom: solid 2rpx #EEE;
				&:last-child{
					border-bottom: none;
				}
				.coupon-auth-item-checked{
					display: flex;
					align-items: center;
					font-size: 32rpx;
					color: #4D4D4D;
					.checkbox{
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						border: solid 2rpx #E6E6E6;
						margin-right: 10rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					&.active{
						.checkbox{
							background-color: #2073F5;
							color: #FFF;
							border-color: #2073F5;
						}
					}
				}
				.coupon-auth-item-image{
					margin: 0 30rpx 0 20rpx;
					image{
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
						background-color: #EEE;
					}
				}
				.coupon-auth-item-info{
					flex: 1;
					min-width: 0;
					.name{
						font-weight: bold;
						font-size: 32rpx;
						color: #141414;
						margin-bottom: 10rpx;
					}
					.type{
						display: inline-block;
						height: 40rpx;
						line-height: 40rpx;
						border-radius: 4rpx;
						padding: 0 10rpx;
						background-color: #F7F7FA;
						font-size: 24rpx;
						color: #9B9C9F;
					}
				}
				.coupon-auth-item-right{
					.percentage{
						font-size: 32rpx;
						color: #141414;
						font-weight: bold;
					}
					.Commission{
						font-size: 28rpx;
						color: #999;
					}
				}
			}
		}
		.staff-list-pop .btn{
			background-color: #FFF;
			padding: 0 30rpx;
			height: 120rpx;
			display: flex;
			align-items: center;
			border-top: solid 2rpx #EEE;
			.btn-box{
				flex: 1;
				height: 90rpx;
				background-color: #2073F5;
				font-size: 32rpx;
				color: #FFF;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		.coupon-auth-list{
			padding-top: 20rpx;
			.coupon-auth-item{
				display: flex;
				align-items: center;
				background-color: #FFF;
				padding: 30rpx;
				border-radius: 8rpx;
				margin-top: 20rpx;
				.coupon-auth-item-checked{
					display: flex;
					align-items: center;
					font-size: 32rpx;
					color: #4D4D4D;
					.checkbox{
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						border: solid 2rpx #E6E6E6;
						margin-right: 10rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					&.active{
						.checkbox{
							background-color: #2073F5;
							color: #FFF;
							border-color: #2073F5;
						}
					}
				}
				.coupon-auth-item-image{
					margin: 0 30rpx 0 20rpx;
					image{
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
						background-color: #EEE;
					}
				}
				.coupon-auth-item-info{
					flex: 1;
					min-width: 0;
					.name{
						font-weight: bold;
						font-size: 32rpx;
						color: #141414;
						margin-bottom: 10rpx;
					}
					.type{
						display: inline-block;
						height: 40rpx;
						line-height: 40rpx;
						border-radius: 4rpx;
						padding: 0 10rpx;
						background-color: #F7F7FA;
						font-size: 24rpx;
						color: #9B9C9F;
					}
				}
				.coupon-auth-item-right{
					.percentage{
						font-size: 32rpx;
						color: #141414;
						font-weight: bold;
					}
					.Commission{
						font-size: 28rpx;
						color: #999;
					}
				}
			}
		}
		.coupon-btn{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #FFF;
			padding: 0 30rpx;
			height: 120rpx;
			display: flex;
			align-items: center;
			.manage{
				width: 240rpx;
				border-radius: 8rpx;
				background-color: #F7F7FA;
				text-align: center;
				height: 90rpx;
				line-height: 90rpx;
				margin-right: 30rpx;
			}
			.add{
				flex: 1;
				min-width: 0;
				height: 90rpx;
				background-color: #2073F5;
				font-size: 32rpx;
				color: #FFF;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				text{
					font-size: 50rpx;
					color: #FFF;
					font-weight: bold;
					margin-right: 10rpx;
				}
			}
			.coupon-btn-manage{
				flex: 1;
				min-width: 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.coupon-btn-manage-checked{
					display: flex;
					align-items: center;
					font-size: 32rpx;
					color: #4D4D4D;
					.checkbox{
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						border: solid 2rpx #E6E6E6;
						margin-right: 10rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					&.active{
						.checkbox{
							background-color: #2073F5;
							color: #FFF;
							border-color: #2073F5;
						}
					}
				}
				.manage-btn{
					display: flex;
					align-items: center;
					.coupon-btn-complate{
						width: 200rpx;
						height: 90rpx;
						background: #F7F7FA;
						border-radius: 8rpx;
						font-size: 32rpx;
						color: #4C4C4C;
						text-align: center;
						line-height: 90rpx;
						margin-right: 20rpx;
					}
					.coupon-btn-del{
						width: 200rpx;
						height: 90rpx;
						background: #FF7A42;
						border-radius: 8rpx;
						font-size: 32rpx;
						color: #FFF;
						text-align: center;
						line-height: 90rpx;
						margin-right: 20rpx;
					}
				}
			}
		}
	}
</style>
